<template>
  <div class="app-loading">
    <!-- Logo和标题 -->
    <div class="loading-content">
      <div class="logo-container">
        <!-- 动画logo -->
        <div class="logo">
          <svg width="80" height="80" viewBox="0 0 100 100">
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              stroke="#4CAF50"
              stroke-width="2"
              stroke-dasharray="283"
              stroke-dashoffset="283"
              class="circle-animation"
            />
            <path
              d="M30 50 L45 65 L70 35"
              stroke="#4CAF50"
              stroke-width="3"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="check-animation"
            />
          </svg>
        </div>

        <!-- 应用标题 -->
        <h1 class="app-title">{{ siteConfig.siteName }}</h1>

        <!-- 加载提示 -->
        <div class="loading-text">
          {{ loadingText }}
        </div>

        <!-- 进度条 -->
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: `${progress}%` }"></div>
        </div>
      </div>
    </div>

    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  progress?: number
}>()

const siteConfig = useSiteConfig()
const progress = computed(() => props.progress || 0)

// 加载提示文本
const loadingTexts = [
  '正在初始化...',
  '加载资源中...',
  '准备就绪...',
  '即将进入...'
]

const loadingText = ref(loadingTexts[0])
let textIndex = 0

// 定时切换加载文本
const textInterval = setInterval(() => {
  textIndex = (textIndex + 1) % loadingTexts.length
  loadingText.value = loadingTexts[textIndex]
}, 800)

onUnmounted(() => {
  clearInterval(textInterval)
})
</script>

<style scoped>
.app-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0d0e10 0%, #1a1b1e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  overflow: hidden;
}

.loading-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.logo {
  width: 80px;
  height: 80px;
  position: relative;
}

/* SVG动画 */
.circle-animation {
  animation: drawCircle 1.5s ease-in-out forwards;
}

.check-animation {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: drawCheck 0.8s 0.8s ease-in-out forwards;
}

@keyframes drawCircle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

.app-title {
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.loading-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-top: 10px;
  height: 20px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* 进度条 */
.progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 20px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 2px;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 175, 80, 0.1) 0%, transparent 70%);
}

.circle-1 {
  width: 400px;
  height: 400px;
  top: -200px;
  left: -200px;
  animation: float1 20s ease-in-out infinite;
}

.circle-2 {
  width: 300px;
  height: 300px;
  bottom: -150px;
  right: -150px;
  animation: float2 15s ease-in-out infinite;
}

.circle-3 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: float3 25s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(50px, 30px) scale(1.1);
  }
  66% {
    transform: translate(-30px, 50px) scale(0.9);
  }
}

@keyframes float2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-40px, -40px) scale(1.15);
  }
  66% {
    transform: translate(40px, -20px) scale(0.95);
  }
}

@keyframes float3 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* 移动端适配 */
@media (max-width: 640px) {
  .logo {
    width: 60px;
    height: 60px;
  }

  .app-title {
    font-size: 24px;
  }

  .loading-text {
    font-size: 12px;
  }

  .progress-bar {
    width: 150px;
  }
}
</style>